<template>
  <div>
    <VideoDownload
      v-if="videoDownLoadShow"
      :videoDownLoadList="videoDownLoadList"
      @doDownload="doDownload"
      @videoDownloadClose="videoDownloadClose"
    />
    <VideoDownloadManage
      ref="videoDownloadManage"
      v-show="videoDownLoadManageShow"
      :show="videoDownLoadManageShow"
      :videoDownloadManageList="videoDownloadManageList"
      v-on="{
        ...$listeners,
        videoDownloadManageClose: videoDownloadManageClose,
      }"
    />
  </div>
</template>
<script>
import VideoDownload from "@/views/pages/video/components/video-download/videoDownload.vue";
import VideoDownloadManage from "@/views/pages/video/components/video-download/videoDownloadManage.vue";
import { downloadVideo } from "@/api/video";

export default {
  name: "video-download-box",
  components: {
    VideoDownload,
    VideoDownloadManage,
  },
  props: {
    /*
     * 录像下载列表数据
     * [{
     *   deviceCode: '10000000001',
     *   channelCode: '1000000001001',
     *   channelName: '铁塔产业园-11号楼',
     *   videoDate: ['2016-05-02 10:00:00','2016-05-02 16:00:00'],
     * }]
     */
    videoDownLoadList: {
      type: Array,
      default: [],
    },
    showFlag: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      videoDownLoadManageShow: this.showFlag === 2, //下载管理的显示与隐藏
      videoDownloadManageList: [],
      videoDownLoadShow: this.showFlag === 1,
    };
  },
  created() {},
  mounted() {},
  watch: {
    showFlag: {
      handler() {
        if (this.showFlag === 3) {
          this.directDownload(); //直接下载
          this.videoDownLoadManageShow = true;
        } else {
          this.videoDownLoadShow = this.showFlag === 1;
          this.videoDownLoadManageShow = this.showFlag === 2;
        }
      },
      deep: true, //json 深度匹配
      immediate: true, //初始化时执行
    },
  },
  methods: {
    /**
     * 关闭
     */
    videoDownloadClose() {
      this.videoDownLoadShow = false;
      this.$emit("closeWindow");
      this.$emit("update:showFlag", 0);
    },
    /**
     * 直接下载
     */
    directDownload() {
      this.doDownload(this.videoDownLoadList);
    },
    /**
     * 打开下载管理
     * @param params 录像下载回调的下载数据
     */
    async doDownload(params) {
      console.log(
        "%c █░░░░░░░░░░░░█ ,注释 doDownload 数据",
        "color: #FAC800",
        params
      );
      if (params.length === 0) {
        return false;
      }
      //处理数据
      const downLoadParam = [];
      for (const param of params) {
        const batchId = this.getUUID();
        param.rangeDate = param.rangeDate || param.videoDate;
        param.batchId = batchId;
        param.startTime = param.videoDate[0];
        param.endTime = param.videoDate[1];
        //去掉重复数据
        if (this.removeRepeatData(param, downLoadParam)) {
          continue;
        }
        downLoadParam.push({
          startTime: param.videoDate[0], //开始时间
          endTime: param.videoDate[1], //结束时间
          deviceCode: param.deviceCode, //设备编码
          channelCode: param.channelCode, //通道编码
          storageType: param.storageType, //1-中心存储  0-前端存储
          batchId: batchId, //唯一id
        });
      }
      //调用下载
      const resp = await downloadVideo(downLoadParam);
      if (!resp.data) {
        return false;
      }
      for (const param of params) {
        for (const dataElement of resp.data) {
          if (dataElement.batchId !== param.batchId) {
            continue;
          }
          param.status = "下载失败";
          param.process = "";
          param.fileSize = "";
          //改变状态
          if (dataElement.returnCode === "0000") {
            param.status = "准备中";
            param.process = "0%";
            param.fileSize = "";
          }
        }
      }
      this.videoDownLoadManageShow = true;
      this.videoDownloadManageList.push(...params);
      this.$refs.videoDownloadManage.getDownList();
    },
    /**
     * 剔除重复数据
     * @param item
     * @param list
     * @returns {boolean}
     */
    removeRepeatData(item, list) {
      let a = false;
      for (let it of list) {
        if (
          item.channelCode === it.channelCode &&
          item.startTime === it.startTime &&
          item.endTime === it.endTime
        ) {
          //通道编码相同，并且时间范围相同
          a = true;
        }
      }
      return a;
    },
    /**
     * 隐藏下载管理
     */
    videoDownloadManageClose() {
      this.videoDownLoadManageShow = false;
      this.$emit("closeWindow");
      this.$emit("update:showFlag", 0);
    },
    /**
     * 生成uuid
     */
    getUUID() {
      const crypto = window.crypto || window.msCrypto;
      const array = new Uint32Array(1);
      const r = crypto.getRandomValues(array)[0];
      return Date.now() + "888" + r;
    },
  },
};
</script>
<style lang="scss" scoped>
.popup-body {
  height: auto;
  width: 770px;
}
.content-box {
  padding: 12px 20px;
  /* 表格盒子 */
  .content-table-box {
    width: 100%;
    height: 290px;
    overflow: hidden;
    /deep/ .el-table {
      background: transparent;
      &:before {
        background: transparent;
      }
      /*表格头部*/
      .el-table__header-wrapper {
        .el-table__header {
          width: 100% !important;
          .has-gutter {
            .is-leaf {
              background: rgba(79, 159, 255, 0.2);
              color: #e8f3fe;
              border-bottom: 1px solid rgba(255, 255, 255, 0.2);
              padding: 0;
              .cell {
                height: 36px;
                line-height: 36px;
                font-size: 14px;
                //font-weight: bold;
                color: #e8f3fe;
              }
            }
          }
        }
      }
      /*表格内容*/
      .el-table__body-wrapper {
        height: 250px;
        overflow-y: auto;
        overflow-x: hidden;
        /*有数据*/
        .el-table__body {
          width: 100% !important;
          .el-table__row {
            height: 32px;
            line-height: 32px;
            td {
              border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            }
          }
          .current-row {
            td {
              background: transparent;
              div {
                font-size: 14px;
                font-weight: normal;
                color: #e8f3fe !important;
              }
            }
          }
        }
      }
    }
    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
      background: transparent;
    }
    /deep/ .el-table th.el-table__cell.is-leaf {
      background: transparent;
      color: #e8f3fe !important;
    }
    /deep/ .el-table th.el-table__cell > .cell {
      color: #e8f3fe !important;
    }
    /deep/ .el-table tr {
      background: transparent !important;
    }
    /deep/ .el-table .cell {
      padding: 0;
      color: #e8f3fe !important;
    }
  }
  .table-name-div {
    width: 100%;
    padding-right: 10px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /*日期控件图标替换，间距调整*/
  /deep/ .y-data-editor-picker {
    width: calc(100% - 30px) !important;
    padding: 0 8px !important;
    .el-range__icon {
      margin-left: -5px !important;
      &:before {
        content: "\e974";
        font-family: "iconfont";
      }
    }
    .el-range__close-icon {
      display: none !important;
    }
  }
  /*列表按钮*/
  .y-table-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .table-btn {
      color: #e8f3fe;
      .table-btn-icon {
        &:before {
          font-size: 18px;
        }
      }
    }
    .disable-table-btn {
      opacity: 0.4;
    }
  }
  //底部按钮
  .bottom-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    .btn {
      width: 107px;
      height: 32px;
    }
  }
}
</style>
